import React, { Component } from "react";
import { observer, inject } from "mobx-react";
import { withRouter } from "react-router-dom";
import { Echarts, Tools } from "weaver-mobile";
const getLabel = Tools.getLabel;
@inject("statisticsStore")
@withRouter
@observer
export default class Statistics extends Component {
    componentWillMount() {
        const { statisticsStore: { init } } = this.props;
        init();
    }

    componentWillUnmount() {
        const { statisticsStore: { clearAllOptions } } = this.props;
        clearAllOptions();
    }

    chartAction = (chart) => {

    }

    render() {
        const {
            statisticsStore,
            statisticsStore: {
                allDatas: { data1, data2, data3, labels },
                allnum, doingnum, landnum, mytasknum, overnum, todonum, legend, seriesData,
            }
        } = this.props;
        const option = {
            title: {
                text: "",
                subtext: "",
                x: "center"
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: "vertical",
                left: "left",
                data: legend.slice()
            },
            series: [
                {
                    name: getLabel("387997", "访问来源"),
                    type: "pie",
                    radius: "55%",
                    center: ["50%", "60%"],
                    data: seriesData.slice(),
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)"
                        }
                    }
                }
            ]
        };
        const option2 = {
            title: {
                text: "",
                subtext: "",
                x: "center"
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "cross",
                    label: {
                        backgroundColor: "#6a7985"
                    }
                }
            },
            color: ["#8BC34A", "#c33223", "#0f68c7"],
            legend: {
                data: [getLabel("732", "未完成"), getLabel("1232", "冻结"), getLabel("555", "完成")]
            },
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: labels
            },
            yAxis: {
                type: "value"
            },
            series: [{
                name: getLabel("732", "未完成"), type: "line",
                smooth: true,
                lineStyle: {
                    normal: {
                        borderColor: "#8BC34A",
                        color: "#8BC34A"
                    },

                },
                areaStyle: {
                    normal: {
                        borderColor: "rgba(0, 0, 0, 0)",
                        color: "rgba(0, 0, 0, 0)",
                    },

                },
                data: data1
            }, {
                name: getLabel("1232", "冻结"),
                type: "line",
                smooth: true,
                lineStyle: {
                    normal: {
                        borderColor: "#c33223",
                        color: "#c33223"
                    },

                },
                areaStyle: {
                    normal: {

                        borderColor: "rgba(0, 0, 0, 0)",
                        color: "rgba(0, 0, 0, 0)",
                    },

                },
                data: data2
            }, {
                name: getLabel("555", "完成"),
                type: "line",
                smooth: true,
                lineStyle: {
                    normal: {
                        borderColor: "#0f68c7",
                        color: "#0f68c7"
                    },

                },
                areaStyle: {
                    normal: {
                        borderColor: "rgba(0, 0, 0, 0)",
                        color: "rgba(0, 0, 0, 0)",
                    },

                },
                data: data3
            },]
        };
        const line1Data = [
            {
                num: allnum,
                name: getLabel("81834", "所有任务"), link: `/index/task?taskState=2&progress=0`
            },
            {
                num: mytasknum,
                name: getLabel("19865", "我的任务"), link: `/index/task?taskState=0&progress=0`
            },
            {
                num: landnum,
                name: getLabel("2232", "里程碑任务"), link: `/index/task?taskState=0&progress=5`
            },
        ]
        const line2Data = [
            {
                num: doingnum,
                name: getLabel("25007", "进行中"), link: `/index/task?taskState=0&progress=2`
            },
            {
                num: overnum,
                name: getLabel("21984", "已超期"), link: `/index/task?taskState=0&progress=3`
            },
            {
                num: todonum,
                name: getLabel("1979", "未开始"), link: `/index/task?taskState=0&progress=1`
            },
        ]
        return (
            <div className="proj-statistic-wrapper">
                <div className="proj-list-box">
                    <div className="proj-list-top-bar">
                        <div className='h-list-top-title'>{getLabel("500823", "任务统计分析")}</div>
                    </div>
                    <div className="proj-list-content">
                        <div className="statistic-task-box">
                            {
                                line1Data.map((el) => <div key={el.name} className="task-count-item" onClick={() => {
                                    if (el.link) {
                                        this.props.history.push(el.link)
                                    }
                                }}>
                                    <div className="task-count-title">{el.name}</div>
                                    <div className="task-count-num">{el.num}</div>
                                </div>)
                            }
                        </div>
                        <div className="task-count-box statistic-task-box">
                            {
                                line2Data.map((el) => <div key={el.name} className="task-count-item" onClick={() => {
                                    if (el.link) {
                                        this.props.history.push(el.link)
                                    }
                                }}>
                                    <div className="task-count-title">{el.name}</div>
                                    <div className="task-count-num">{el.num}</div>
                                </div>)
                            }
                        </div>
                    </div>
                </div>
                <div className="proj-list-box">
                    <div className="proj-list-top-bar">
                        <div className='h-list-top-title'>{getLabel("513997", "项目类型统计")}</div>
                    </div>
                    <div className="statistics-echarts-box">
                        <Echarts ref={ref => statisticsStore.echarts1 = ref} useDefault={false} option={option}
                            chartAction={this.chartAction} />
                    </div>
                </div>
                <div className="proj-list-box">
                    <div className="proj-list-top-bar">
                        <div className='h-list-top-title'>{getLabel("514047", "项目完成情况统计")}</div>
                    </div>
                    <div className="statistics-echarts-box">
                        <Echarts ref={ref => statisticsStore.echarts2 = ref} useDefault={false} option={option2}
                            chartAction={this.chartAction} />
                    </div>
                </div>
            </div>)
    }
}
